<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        class Dep {
          constructor () {
            this.subs = []
          }
          addSub (sub) {
            this.subs.push(sub)
          }
          removeSub (sub) {
            remove(this.sub, sub)
          }
          depend () {
            if (window.target) {
              this.addSub(window.target)
            }
          }
          notify () {
            const subs = this.subs.slice()
            for (let i = 0, l = subs.length; i < l; i++) {
              subs[i].update()
            }
          }
        }
        
        function remove (arr, item) {
          if (arr.length) {
            const idx = arr.indexOf(item)
            if (idx !== -1) {
              return arr.splice(idx, 1)
            }
          }
        }

        function defineReactive (data, key, val) {
            let dep = new Dep()
            Object.defineProperty (data, key, {
                enumerable: true,
                configgurable: true,
                get: function () {
                    dep.depend()
                    console.log('getter执行')
                    return val
                },
                set: function (newVal) {
                    console.log( 'setter执行' + newVal)
                    if (val === newVal) {
                        return
                    }
                    dep.notify()
                    val = newVal
                }
            }) 
        }
        let person = {
            uname: "berlin"
        }
        defineReactive(person, 'uname', 'berlin')
        function render (newval, val){
            document.getElementById('box').innerHTML = person.uname
        }
        render()
    </script>
</body>
</html>